<template>
  <div class="page-table">
    <div class="page-filter">
      <div class="query">
        <el-form ref="form" :inline="true" size="small">
          <el-form-item>
            <el-date-picker
                v-model="searchQuery.beginSearchTime"
                type="datetime"
                value-format="timestamp" format="yyyy-MM-dd HH:mm"
                placeholder="开始时间">
            </el-date-picker>
          </el-form-item>
          <el-form-item>
            <el-date-picker
                v-model="searchQuery.endSearchTime"
                type="datetime"
                value-format="timestamp" format="yyyy-MM-dd HH:mm"
                placeholder="结束时间">
            </el-date-picker>
          </el-form-item>
          <!--          <el-form-item>-->
          <!--            <el-select v-model="searchQuery.siteId" placeholder="提车网点" clearable filterable>-->
          <!--              <el-option v-for="item in siteArray" :key="item.id" :label="item.name" :value="item.id"></el-option>-->
          <!--            </el-select>-->
          <!--          </el-form-item>-->

          <el-button type="primary" plain size="small" @click="queryList()">查询
          </el-button>
        </el-form>
      </div>
      <div class="op">
        <el-button size="mini" :disabled="additional" @click="addFee">额外费用</el-button>
        <el-button         :loading="downloadLoading"
                           size="mini"
                           type="primary" plain
                           icon="el-icon-download" @click="exportExcel">导出</el-button>
      </div>
    </div>
    <div class="box-style">
      <div class="top">
        <ad-table :data="signRecordList" u-table @sort-change="signRecordSortInitList"
                  :data-changes-scroll-top="signRecordIsScrollTop"
                  v-loading="signRecordInitLoading" @table-body-scroll="signRecordGetMoreList"
                  :searchQuery="signRecordSearchQuery" @search="signRecordGetInitList"
                  @filter-change="signRecordFilterInitList"
                  :height="tableHeight" @cell-click="cellClick">
          <ad-table-column label="序号" type="index" ctype="index" fixed/>
          <ad-table-column label="订单号" prop="orderSubNo" ctype="orderNo" searchable>
            <!--                                    <template slot-scope="scope">-->
            <!--                                      <el-input size="mini" v-model="scope.row.orderSubNo"></el-input>-->
            <!--                                    </template>-->
          </ad-table-column>
          <ad-table-column label="签收类型" prop="needMoreTransport" w="4c2f" dictName="sign_type" filterable/>
          <ad-table-column label="签收人" prop="createUserName" w="3c2f" searchable/>
          <ad-table-column label="签收时间" prop="createTime" width="130" ctype="datetime" sortable/>
          <ad-table-column label="制单人" prop="orderCreateUserName" w="3c2f" searchable sortable/>
          <ad-table-column label="制单时间" prop="orderCreateTime" width="130" ctype="datetime" sortable/>
          <ad-table-column label="出发地" prop="startCode" queryPro="startName" ctype="city" w="3c2f" searchable/>
          <ad-table-column label="目的地" prop="destinationCode" queryPro="destinationName" ctype="city" w="3c2f"
                           searchable/>
          <ad-table-column label="车辆名称" prop="carName" w="4c2f" searchable/>
          <ad-table-column label="车架号" prop="vin" ctype="vin-2f" searchable/>
          <ad-table-column label="运输方式" prop="transportType" dictName="transport_way" filterable w="4c1f"/>
          <ad-table-column label="委托方" prop="linkmanName" w="3c2f" searchable/>
          <ad-table-column label="联系电话" prop="linkmanPhone" ctype="phone-2f" searchable/>
          <ad-table-column label="到付金额" prop="deliveryPayFee" w="3c2f" sortable/>
          <ad-table-column label="承运费用" prop="transportFee" w="3c2f" sortable/>
          <ad-table-column label="订单备注" prop="orderRemark" ctype="remark"/>
          <ad-table-column width="auto"/>
        </ad-table>
      </div>


<!--      底部弹出框-->
<!--      <el-drawer-->
<!--        size="36%"-->
<!--        :visible.sync="drawer"-->
<!--        direction="btt"-->
<!--        :with-header="false">-->
      <el-dialog
        title="提示"
        :visible.sync="drawer"
        width="95%">
      <div id="bottom" class="bottom" style="min-height: 290px">
        <div class="title-bar" v-if="!isInspect"
             style="height:36px;"></div>
        <div v-if="!isInspect"
             style="text-align: center;margin: 40px auto;font-size: 14px;color:rgba(96,98,102,0.5);">
          <div style="height:44px;">
            <img :src="noData"/>
          </div>
          暂无内容
        </div>
        <div v-else-if="isInspect">
          <div class="title-bar">
            <h2>订单编号 : {{orderSubNo}}</h2>
          </div>
          <div class="content">
            <div class="left" style="min-width: 440px">
              <div class="form-wrapper assign" style="position: relative">
                <h3>签收信息</h3>
                <el-descriptions :column="2" border size="mini">
                  <el-descriptions-item label="签收时间">
                    <value :model="data" prop="createTime" type="datetime" style="display: inline-block;width:110px"/>
                  </el-descriptions-item>
                  <el-descriptions-item label="签收人">
                    <value :model="data" prop="createUserName" style="display: inline-block;width:90px"/>
                  </el-descriptions-item>
                  <el-descriptions-item label="车辆名称" :span="2">
                    <value :model="data" prop="carName"/>
                  </el-descriptions-item>
                  <!--                  <el-descriptions-item label="车架号" :span="2">-->
                  <!--                    <value :model="data" prop="vin"/>-->
                  <!--                  </el-descriptions-item>-->
                  <el-descriptions-item label="签收类型" :span="2">
                    <ad-status-select-noclear v-if="isEdit" style="margin: -5px 0" :disabled="!isEdit" size="mini" v-model="signForm.needMoreTransport"
                                              :dict="dict.sign_type"></ad-status-select-noclear>
                    <value v-else :model="data" prop="needMoreTransport" dictName="sign_type"/>
                  </el-descriptions-item>
                  <el-descriptions-item label="签收备注" :span="2">
                    <el-input v-if="isEdit" style="margin: -5px 0" :disabled="!isEdit" size="mini" v-model="signForm.remark"
                              maxLength="100"/>
                    <value v-else :model="data" prop="remark"/>
                  </el-descriptions-item>
                </el-descriptions>

                <div class="op" style="position: absolute;top:3px;right:5px">
                  <el-button v-if="isEdit" size="mini" type="primary" plain @click="inWarehouse">保存</el-button>
                  <el-button v-if="isEdit" size="mini" type="primary" plain @click="isEdit=false">取消</el-button>
                  <el-button v-else size="mini" type="primary" plain @click="editSign">修改签收</el-button>
                </div>
              </div>
            </div>
            <div id="lineImg" class="right" :style="{'border-left':'none','height':rightHeight}">
              <div class="form-wrapper driver" style="width:100%;">
                <h3>验车信息</h3>
              </div>
              <div class="form-wrapper" style="width:100%;display: inline-block">
                <div
                  style="width:130px;display: inline-block;background: #f5f5f5;float: left;font-size: 12px;">
                  <div
                    style="line-height: 63px;border-right:1px #e3e3e3 solid;border-bottom: 1px #e3e3e3 solid;padding-left: 10px;">
                    外观及内饰验车照片
                  </div>
                </div>
                <div class="form-content lineForm" style="margin-left: 130px;border-bottom: 1px #e3e3e3 solid;height:64px;overflow-y: hidden">
                  <div v-show="previewUrl.length==0" class="noImg">
                    暂无图片
                  </div>
                  <div v-show="previewUrl.length>0" style="line-height: 12px">
                    <!--                    <el-image v-for="url in previewUrl" :key="url" :src="url"-->
                    <!--                              style="width: 90px; height: 58px;margin-right: 10px;"-->
                    <!--                              :preview-src-list="previewUrl"></el-image>-->
                    <viewer :images="previewUrl">
                      <img v-for="(url,i) in previewUrl" :id="'img'+i" :src="url" :key="url"
                           :style="{'width': '90px', 'height': '58px','margin-right': '10px','display':i>5?'none':'inline'}">
                      <span class="imgsMore" @click="viewerImg"
                            v-if="previewUrl.length>6">更多</span>
                    </viewer>
                  </div>
                </div>
                <div
                    style="width:130px;display: inline-block;background: #f5f5f5;float: left;font-size: 12px;">
                  <div
                      style="line-height: 30px;border-right:1px #e3e3e3 solid;border-bottom: 1px #e3e3e3 solid;padding-left: 10px;">
                    车架/车牌号
                  </div>
                </div>
                <div
                    style="width:150px;display: inline-block;float: left;font-size: 12px;">
                  <div
                      style="line-height: 30px;height: 30px;border-right:1px #e3e3e3 solid;border-bottom: 1px #e3e3e3 solid;padding-left: 10px;padding-right: 10px;">
                    {{inspectForm.vin}}
                  </div>
                </div>
                <div
                    style="width:100px;display: inline-block;background: #f5f5f5;float: left;font-size: 12px;">
                  <div
                      style="line-height: 30px;border-right:1px #e3e3e3 solid;border-bottom: 1px #e3e3e3 solid;padding-left: 10px;">
                    公里数
                  </div>
                </div>
                <div
                    style="width:120px;display: inline-block;float: left;font-size: 12px;">
                  <div
                      style="line-height: 30px;height: 30px;border-right:1px #e3e3e3 solid;border-bottom: 1px #e3e3e3 solid;padding-left: 10px;">
                    {{inspectForm.km}}
                  </div>
                </div>
                <div
                    style="width:100px;display: inline-block;background: #f5f5f5;float: left;font-size: 12px;">
                  <div
                      style="line-height: 30px;border-right:1px #e3e3e3 solid;border-bottom: 1px #e3e3e3 solid;padding-left: 10px;">
                    验车备注
                  </div>
                </div>
                <div
                    style="font-size: 12px;width: calc(100% - 595px);margin-left: 590px">
                  <div :title="inspectForm.remark"
                       style="height:30px;line-height: 30px;border-bottom: 1px #e3e3e3 solid;padding-left: 10px;padding-right: 10px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap">
                    {{inspectForm.remark?inspectForm.remark:'-'}}
                  </div>
                </div>

              </div>
            </div>
          </div>
        </div>
      </div>
<!--      </el-drawer>-->
      </el-dialog>
    </div>
    <!--添加、修改弹窗-->
    <el-dialog
        :show-close="true"
        :closeOnClickModal="false"
        title="额外费用"
        :visible.sync="dialogVisible"
        width="830px"
        class="customerFormDialog"
    >
      <outlay-manage id="outlayManage" ref="outlayManage" :addScene="3" :id="data.orderId" :visible.sync="dialogVisible"/>
      <span slot="footer" class="dialog-footer">
              <el-button type="primary" @click="addFeeList" size="small">新 增</el-button>
              <el-button @click="dialogVisible = false" size="small">取 消</el-button>
            </span>
    </el-dialog>

  </div>
</template>

<script>
  import AdSuggestion from '@/components/AdSuggestion'
  import AdTable from '@/components/AdTable'
  import AdTableColumn from '@/components/AdTable/AdTableColumn'
  import adTable from '@/mixins/adTable'
  import Value from '@/components/AdValue'
  import api, {get as signRecordApiGetList} from '@/api/sign/signRecord';
  import AdUpload from '@/components/AdUpload'
  import noData from '@/assets/404_images/nodata.png';
  import OutlayManage from './components/outlayManage';
  import SettlerManage from '@/components/SettlerManage';
  import DriverManage from '@/components/DriverManage'
  import AdStatusSelect from '@/components/AdStatusSelect'
  import AdStatusSelectNoclear from '@/components/AdStatusSelect/noClear'
  import QRCode from 'qrcodejs2'
  import {
    getCompanyList as getSuggestCompanyList
  } from '@/api/suggestion'
  import apiUser from '@/api/system/user';
  import {parseStatus} from '@/utils/code'
  import { download } from '@/api/data'
  import { downloadFile } from '@/utils'

  export default {
    name: 'sign-sign-signRecord',
    components: {
      AdTable,
      AdTableColumn,
      AdSuggestion,
      Value,
      AdUpload,
      OutlayManage,
      AdStatusSelect,
      AdStatusSelectNoclear,
      SettlerManage,
      DriverManage
    },
    dicts: ['pick_driver_status', 'sign_status', "takecar_status", "finish_status", "takecar_type", "settlement_type", "sign_type", "delivery_payment_type",'transport_way'],
    mixins: [adTable([
      {name: 'signRecord', pk: 'code'},
    ])],
    data() {
      return {
        drawer: false,
        downloadLoading:false,
        noData,
        siteArray: [],
        additional: true,
        isInspect: false,
        isShowDriver: false,
        rightHeight: 'calc(36vh - 37px)',
        leftHeight: 'calc(36vh - 72px)',
        signForm: {
          id: null,
          orderId: null,
          transportId: null,
          needMoreTransport: null,
          remark: null,
        },
        deliverForm: {
          cashFee: undefined,//现金值
          deliveryPayFee: undefined,
          consigneeName: null,
          consigneePhone: null,
          type: null,
          remark: null,
          orderIdList: [],
          takeCarImageList: [], //交付凭证图
          paymentImageList: [],//支付凭证图
        },
        searchQuery: {
          beginSearchTime: null,
          endSearchTime: null,
          siteId: null
        },
        tableHeight: 440,
        bottomTabHeight: 300,
        topTableData: [
          {creator: '按不出', no: 'http:www.baidu.com'}
        ],
        bottomTableData: [],
        deliverTableData: [],
        saveForm: {
          company: '',
          companyId: null,
          takeCarFee: null,
          settlementId: null,
          settlementName: '',
          settlementPhone: '',
          settlementType: '',
          driverId: null,
          driverName: '',
          driverPhone: '',
          driverCardNumber: '',
          licensePlateNumber: ''
        },
        inspectForm: {
          specification: undefined,
          towHook: undefined,
          ashtray: undefined,
          toolkit: undefined,
          antenna: undefined,
          key: undefined,
          warningSign: undefined,
          licensePlateFrame: undefined,
          aidPacket: undefined,
          footPad: undefined,
          airPump: undefined,
          cigarLighter: undefined,
          spareTire: undefined,
          jack: undefined,
          bellCover: undefined,
          vin: undefined,
          km: undefined,
          remark: undefined,
        },
        deliverInfo: {
          specification: undefined,
          towHook: undefined,
          ashtray: undefined,
          toolkit: undefined,
          antenna: undefined,
          key: undefined,
          warningSign: undefined,
          licensePlateFrame: undefined,
          aidPacket: undefined,
          footPad: undefined,
          airPump: undefined,
          cigarLighter: undefined,
          spareTire: undefined,
          jack: undefined,
          bellCover: undefined,
          vin: undefined,
          km: undefined,
          remark: undefined,
        },
        rules: {
          // company: [
          //   {required: true, message: '必选', trigger: 'blur'},
          // ],
          // settlementName: [
          //   {required: true, message: '必选', trigger: 'blur'},
          // ],
          // settlementType: {required: true, message: '必选', trigger: 'blur'},
          // settlementPhone: [
          //   {required: true, message: '必选', trigger: 'blur'},
          // ]
        },
        inspectRules: {
          vin: [
            {required: true, message: '必填', trigger: 'blur'},
          ],
          km: [
            {required: true, message: '必填', trigger: 'blur'},
          ]
        },
        operates: {
          list: [
            {
              label: '移除',
              type: 'primary',
              icon: '',
              disabled: (index, row) => {
                return false;
              },
              method: (index, row) => {
                this.del(row, index);
              }
            }
          ]
        },
        deliverOperates: {
          list: [
            {
              label: '移除',
              type: 'primary',
              icon: '',
              disabled: (index, row) => {
                return false;
              },
              method: (index, row) => {
                this.delDeliver(row, index);
              }
            }
          ]
        },
        orderSubNo: '',
        data: {},
        scanQrcodePaySuccess: false,
        isEdit: false,
        validateImages: [],
        images: [],
        previewUrl: [],
        deliverInfoUrl: [],
        dialogVisible: false,
        dialogSettlerVisible: false,
        dialogDriverVisible: false,
      }
    },
    created() {
      let self = this;
      self.signRecordGetInitList()
      setTimeout(function () {
        self.tableHeight = document.documentElement.clientHeight - 160;
        // self.tableHeight = document.documentElement.clientHeight - document.getElementById('bottom').offsetHeight - 145;
        self.bottomTabHeight = document.getElementById('bottom').offsetHeight - 35;
      })

      if (this.detectZoom() == 100) {
        this.rightHeight = 'calc(36vh - 37px)'
        this.leftHeight = 'calc(36vh - 72px)'
      }
      if (this.detectZoom() == 125) {
        this.rightHeight = 'calc(36vh - 17px)'
        this.leftHeight = 'calc(36vh - 52px)'
      }
    },
    methods: {
      signRecordApiGetList, parseStatus, getSuggestCompanyList,
      viewerImg: function () {
        document.getElementById('img0').click()
      },
      detectZoom: function () {
        let ratio = 0,
          screen = window.screen,
          ua = navigator.userAgent.toLowerCase();

        if (window.devicePixelRatio !== undefined) {
          ratio = window.devicePixelRatio;
        } else if (~ua.indexOf('msie')) {
          if (screen.deviceXDPI && screen.logicalXDPI) {
            ratio = screen.deviceXDPI / screen.logicalXDPI;
          }
        } else if (window.outerWidth !== undefined && window.innerWidth !== undefined) {
          ratio = window.outerWidth / window.innerWidth;
        }

        if (ratio) {
          ratio = Math.round(ratio * 100);
        }
        return ratio;
      },
      //查询
      queryList: function () {
        let self = this;
        self.isInspect = false;
        self.additional = true;
        self.signRecordGetInitList()
      },
      cellClick(row, column, event) {
        let self = this;
        self.drawer = true;
        self.data = row;
        self.orderSubNo = row._row?row._row.orderSubNo:row.orderSubNo;
        self.signForm = {
          id: row.id,
          orderId: row.orderId,
          transportId: row.transportId,
          needMoreTransport: row.needMoreTransport,
          remark: row.remark,
        };
        api.gegGerifyData(row.orderId).then(res => {
          self.inspectForm.specification = res.data.specification;
          self.inspectForm.towHook = res.data.towHook;
          self.inspectForm.ashtray = res.data.ashtray;
          self.inspectForm.toolkit = res.data.toolkit;
          self.inspectForm.antenna = res.data.antenna;
          self.inspectForm.key = res.data.key;
          self.inspectForm.warningSign = res.data.warningSign;
          self.inspectForm.licensePlateFrame = res.data.licensePlateFrame;
          self.inspectForm.aidPacket = res.data.aidPacket;
          self.inspectForm.footPad = res.data.footPad;
          self.inspectForm.airPump = res.data.airPump;
          self.inspectForm.cigarLighter = res.data.cigarLighter;
          self.inspectForm.spareTire = res.data.spareTire;
          self.inspectForm.jack = res.data.jack;
          self.inspectForm.bellCover = res.data.bellCover;
          self.inspectForm.vin = res.data.vin;
          self.inspectForm.km = res.data.km;
          self.inspectForm.remark = res.data.remark;
          self.previewUrl = res.data.validateImages;
          res.data.validateImages.forEach((d, i) => {
            self.images.push({
              name: d,
              url: d
            })
          })
          self.$refs.adimg.images = [];
          self.$refs.adimg.images = self.images;
        })
        self.additional = false;
        self.isInspect = true;
      },
      clearFrom: function () {
        let self = this;
        self.removeLink();
        self.signForm.needMoreTransport = null;
        self.signForm.remark = null;
        self.saveForm.takeCarFee = null;
        self.saveForm.settlementType = null;
        self.saveForm.driverName = '';
        self.saveForm.driverPhone = '';
        self.saveForm.driverCardNumber = '';
        self.saveForm.licensePlateNumber = ''
      },
      //修改签收
      editSign: function () {
        let self = this;
        self.isEdit = true;
      },
      //签收保存
      inWarehouse() {
        let self = this;
        if (self.signForm.needMoreTransport == null || self.signForm.needMoreTransport == '') {
          self.$notify({
            title: '保存',
            message: '请选择签收类型',
            position: 'bottom-right',
            type: 'warning'
          });
          return
        }
        self.$confirm('是否确定保存?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          let ajaxData = {};
          ajaxData = {...self.signForm};
          api.inWarehouse(ajaxData).then(res => {
            if (res.code == 0) {
              self.$notify({
                title: '保存',
                message: res.msg,
                position: 'bottom-right',
                type: 'success'
              });
              self.queryList();
              self.isEdit = false;
              self.signForm = {
                id: null,
                needMoreTransport: null,
                orderId: null,
                remark: null,
                transportId: null,
              };
              self.isInspect = false;
              self.drawer = false;
            } else {
              self.$notify({
                title: '保存',
                message: res.msg,
                position: 'bottom-right',
                type: 'error'
              });
            }
          })
        }).catch(() => {
        });
      },

      //额外费用
      addFee: function () {
        let self = this;
        self.dialogVisible = true;
      },
      exportExcel() {
        let self = this;
        self.downloadLoading = true
        const {pageNo,pageSize,...reset} = self.signRecordSearchQuery;
        download(`api/sign/export`, {...reset,...self.searchQuery}).then(res => {
          downloadFile(res.data, res.headers.downloadFileName, 'xlsx')
        }).finally(()=>{
          self.downloadLoading = false
        })
      },
      //新增
      addFeeList: function () {
        let self = this;
        self.$refs.outlayManage.addDriver();
      },
    }

  }
</script>

<style lang="scss" scoped>
  .page-table {
    display: flex;
    flex: 1;
    flex-direction: column;

    .box-style {
      display: flex;
      flex: 1;
      border: 1px solid #e3e3e3;
      flex-direction: column;
    }

    .top {
      display: flex;
      flex: 1;
      border-bottom: 1px solid #4da7fa;
      flex-direction: column;

      &:after {
        content: '';
        display: block;
        height: 4px;
        background: #4da7fa;
        opacity: 0.2;
      }

      .table-wrapper {
        flex: 1;
      }

      .table {
        flex: 1;
      }
    }

    .bottom {
      display: flex;
      height: 36vh;
      flex-direction: column;

      .title-bar {
        display: flex;
        line-height: 36px;
        background: #f5f5f5;
        border-bottom: 1px solid #e3e3e3;
        padding-left: 10px;
        flex-shrink: 0;

        .op {
          margin-left: auto;
          margin-right: 12px;
        }
      }

      .content {
        display: flex;
        flex: 1;
        overflow: hidden;

        .left {
          display: flex;

          &:after {
            content: '';
            display: block;
            width: 3px;
            background: #4da7fa;
            opacity: 0.2;
          }
        }

        .middle {
          display: flex;
        }

        .right {
          flex: 1;
          overflow: hidden;

          .table-wrapper {
            height: 100%;
          }
        }

        .form-wrapper {
          display: flex;
          flex: 1;
          flex-direction: column;
          width: 18vw;

          h3 {
            height: 35px;
            box-sizing: border-box;
          }

          .form-content {
            padding: 10px 10px 0 10px;
            box-sizing: border-box;
            overflow-y: auto;

            .el-form-item {
              margin-bottom: 10px;
            }
          }
        }
      }
    }

    .bottom {
      & > .title-bar {
        padding-left: 16px;
        border-bottom: 1px solid #bdd0e3;
        background: #f5f5f5;
        align-items: center;
      }

      h2 {
        font-size: 12px;
      }

      h3 {
        padding-left: 10px;
        border-bottom: 1px solid #e3e3e3;
        background: #f5f5f5;
        line-height: 30px;
        font-size: 12px;
      }

      //.left h3 { border-right: 1px solid #e3e3e3; }
      //.middle h3 { border-left: 1px solid #e3e3e3; }
      .right {
        border-left: 1px solid #e3e3e3;
      }
    }
  }
</style>